<template>
    <div class="module-three">
        <div class="wrap">
          <Row class="module-title">
              <i-col span="24">
              <h3>客户产品</h3>
              </i-col>
          </Row>

          <Row class="text g-mt20">
              <i-col span="24">
              <p>丰富模板、组件库 满足您的修改化需求，完美兼容小程序和公众号</p>
              </i-col>
          </Row>

          <Row class="ico-list clearfix g-mt80 g-mb30">
              <i-col span="6" class="ico-list-item fl">
                  <div class="item-wrap">
                    <img src="./product1.jpg" alt="..." />
                    <div class="cover"></div>
                    <a href="#" class="link-wrap">
                      <h4>佳和咖啡</h4>
                      <img src="./ew.jpg" width="377" alt="..." />
                    </a>
                  </div>
              </i-col>

            <i-col span="6" class="ico-list-item fl">
              <div class="item-wrap">
                <img src="./product2.jpg" alt="..." />
                <div class="cover"></div>
                <a href="#" class="link-wrap">
                  <h4>佳和咖啡</h4>
                  <img src="./ew.jpg" width="377" alt="..." />
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item fl">
              <div class="item-wrap">
                <img src="./product3.jpg" alt="..." />
                <div class="cover"></div>
                <a href="#" class="link-wrap">
                  <h4>佳和咖啡</h4>
                  <img src="./ew.jpg" width="377" alt="..." />
                </a>
              </div>
            </i-col>

            <i-col span="6" class="ico-list-item fl">
              <div class="item-wrap">
                <img src="./product4.jpg" alt="..." />
                <div class="cover"></div>
                <a href="#" class="link-wrap">
                  <h4>佳和咖啡</h4>
                  <img src="./ew.jpg" width="377" alt="..." />
                </a>
              </div>
            </i-col>
          </Row>

          <Row class="btn-wrap g-mb100">
            <Button type="primary" :loading="loading" @click="toLoading">
              <span v-if="!loading"><i class="fa fa-angle-right g-mr10"></i>Click me!</span>
              <span v-else>Loading...</span>
            </Button>
          </Row>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import $ from 'jquery'

    export default {
        data() {
          return {
            icoList: [],
            loading: false
          }
        },
        created() {
          this.getData()
          this.bindEvent()
        },
        methods: {
          getData() {
              for(var i = 0; i < 4; i++){
                  this.icoList.push(1)
              }
          },
          bindEvent() {
            $(function () {

            })
          },
          toLoading() {
            this.loading = true
          }
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~@/common/stylus/variable.styl"
    @import "~@/common/stylus/mixin.styl"

    .module-three
      padding-top: 60px
      .ico-list
        overflow: hidden
        .ico-list-item
          float: left
          font-size: 0px
          .item-wrap>img
            wh(250px, 380px)
            cursor: pointer
          .item-wrap
            position: relative
            wh(250px, 380px)
            margin: 0 auto
            overflow: hidden
            .cover
              display: block
              ltposition(50%, 50%)
              wh(0%, 0%)
              background-color: rgba(0,0,0,.4)
              overflow: hidden
            .link-wrap
              lbposition(0, -100%)
              height: auto
              font-size: 0
              h4
                hh(24px)
                margin-bottom: 5px
                sc($font-medium-x, $white)
                text-align: center
              img
                margin-bottom: 2px
                width: 250px
            &:hover
              .cover
                left: 0px
                top: 0
                wh(100%, 100%)
                transition: .2s ease
                cursor: pointer
              .link-wrap
                transition: .3s .2s ease
                bottom: 0
      .btn-wrap
        padding: 10px 0
        text-align: center
        cursor: pointer
    @media (max-width: 765px)
      .module-three
        .ico-list
          .ico-list-item
            width: 50%
</style>
